import Taro from "@tarojs/taro";
import { Text, View, Input, Button } from "@tarojs/components";
import { useEffect, useState } from "react";
import { navigateTo, secondsToMinutes } from "../../../common/_.js";
import { DatePicker, Table, Video } from "@nutui/nutui-react-taro";
import ColumnTitle from "../../../components/columnTitle";
import { pageVideoAddrMiniTotal, pageVideoEntMiniTotal, pageVideoMiniTotal } from "../../../api/total";
import moment from "moment/moment.js";
import { iconCompany, iconPosition, iconvideo } from "../../assets/files.js";
import "./index.scss";

definePageConfig({
  navigationBarTitleText: "个人信息",
});

export default function VideoTotal() {
  const [startDate, setStartDate] = useState(moment().subtract(7, 'days').format("YYYY-MM-DD"))
  const [endDate, setEndDate] = useState(moment().format("YYYY-MM-DD"))
  const [timeType, setTimeType] = useState("start")
  const [timeStartVisible, setTimeStartVisible] = useState(false)
  const [timeEndVisible, setTimeEndVisible] = useState(false)
  const [tabsList, setTabsList] = useState([
    {
      id: 1,
      name: '近一周'
    },
    {
      id: 2,
      name: '近1月'
    },
    {
      id: 3,
      name: '近一年'
    },
    {
      id: 4,
      name: '自定义'
    }
  ])

  const [data1, setData1] = useState([])
  const [data2, setData2] = useState([])
  const [data3, setData3] = useState([])
  const [cur, setCur] = useState(1)
  function changeTab(id) {
    setCur(id)
    let now = moment()
    setEndDate(moment().format("YYYY-MM-DD"))
    if (id === 1) {
      setStartDate(now.subtract(7, 'days').format("YYYY-MM-DD"))
    } else if (id === 2) {
      setStartDate(now.subtract(1, 'months').format("YYYY-MM-DD"))
    } else if (id === 3) {
      setStartDate(now.subtract(1, 'years').format("YYYY-MM-DD"))
    } else if (id === 4) {
      setTimeStartVisible(true)
    }
  }

  useEffect(() => {
    getVideoList()
    getAreaList()
    getCompanyList()
  }, [startDate, endDate])

  async function getVideoList() {
    const { data } = await pageVideoMiniTotal({ startDate, endDate, pageSize: 5 })
    setData1(data.list)
  }

  async function getAreaList() {
    const { data } = await pageVideoAddrMiniTotal({ startDate, endDate, pageSize: 5 })
    setData2(data.list)
  }

  async function getCompanyList() {
    Taro.showLoading()
    const { data } = await pageVideoEntMiniTotal({ startDate, endDate, pageSize: 5 })
    setData3(data.list)
    Taro.hideLoading()
  }

  const [totalText,setTotalText] = useState('学习平台自上线以来运行平稳，平台累计用户绑定数超6042人，平台页面累计访问数超11377次，自主开展学习教育23013次，开展能力测试 11636次，达标率89.9%，优秀率24.2%，受理全市88家单位（场所）培训预约并组织开展，培训人数3058')
  const copyText = () =>{
    Taro.setClipboardData({
      data:totalText,
      success: function (res) {
        wx.showToast({
          title: '复制成功'
        });
      },
    })
  }

  return (
    <View>
      <View className="tabWrap">
        {
          tabsList?.map((v, i) => {
            return (
              <View style={{backgroundColor: cur === v.id ? '#DDE2F8' : '#fff'}} onClick={() => changeTab(v.id)} className="tWrap">
                <Text style={{ color: cur === v.id ? ' #6486FF' : 'rgba(33,33,33,0.8)' }}>{v.name}</Text>
              </View>
            )
          })
        }

      </View> 
      <View className="totalTime">
        <Text>统计时间：{startDate}-{endDate}</Text>
      </View>

      {/* <View className="totWrap">
        <Text>
        学习平台自上线以来运行平稳，平台累计用户绑定数超
        <Text className="active">6042</Text>
        人，平台页面累计访问数超
        <Text className="active">11377</Text>
        次，自主开展学习教育
        <Text className="active">23013</Text>
        次，开展能力测试 
        <Text className="active">11636</Text>
        次，达标率
        <Text className="active"> 89.9%</Text>
       ，优秀率
       <Text className="active"> 24.2%</Text>
       ，受理全市
       <Text className="active"> 88</Text>
       家单位（场所）培训预约并组织开展，培训人数
       <Text className="active"> 3058</Text>。
        </Text>
        <Text onClick={copyText} className="copyBtn">点击复制</Text>

      </View> */}

      <View className="totalWrap">
        <ColumnTitle
         moreStyle={{color:"#939393"}} 
         style={{ fontWeight: '300' }}
         title1="视频观看统计"
         source={iconvideo}
          isVisible={false} click={() => {
          navigateTo("/packageA/pages/video-total-page/index", {
            title: '视频观看统计',
            type: "video",
            startDate,
            endDate
          })
        }} />

        <View className="headWrap" style={{ flex: 1,backgroundColor:"#f1faff" }}>
          <Text className="tit" style={{ width: '180px', textAlign: "left" }}>视频名称</Text>
          {/* <Text className="tit" style={{ width: '62px' }}>观看时间</Text> */}
          <Text className="tit" style={{ width: '62px' }}>观看人数</Text>
          <Text className="tit" style={{ width: '62px' }}>下载(次)</Text>
        </View>

        <View
          className={"list-item"}
        >
          {
            data1.map(v => {
              return (
                <View className="iteWrap" style={{ flex: 1 }}>
                    <Text className="coltit" style={{ width: '180px', textAlign: "left" }}>{v.name}</Text>
                    {/* <Text className="coltit" style={{ width: '62px' }}>{v.watchDuration ? secondsToMinutes(v.watchDuration) : '-'}</Text> */}
                    <Text className="coltit" style={{ width: '62px' }}>{v.watchPeopleTotal || '-'}</Text>
                    <Text className="coltit" style={{ width: '62px' }}>{v.downloadTotal || '-'}</Text>
                  </View>
              )
            })
          }
        </View>
      </View>

      <View className="totalWrap">
        <ColumnTitle 
        style={{ fontWeight: '300' }} 
        moreStyle={{color:"#939393"}} 
        title1="区域统计" 
        isVisible={false} 
        source={iconPosition}
        click={() => {
          navigateTo("/packageA/pages/video-total-page/index", {
            title: '区域统计',
            type: "area",
            startDate,
            endDate
          })
        }} />
        <View className="headWrap" style={{ flex: 1,backgroundColor:"#e6fdf8" }}>
          <Text className="tit" style={{ width: 160, textAlign: "left" }}>地区名称</Text>
          <Text className="tit" style={{ width: 90 }}>总人数</Text>
          <Text className="tit" style={{ width: 90 }}>观看(次)</Text>
        </View>

        <View className={"list-item"}>
          {
            data2.map(v => {
              return (
                <View className="iteWrap" style={{ flex: 1 }}>
                    <Text className="coltit" style={{ width: 160, textAlign: "left" }}>{v.name}</Text>
                    <Text className="coltit" style={{ width: 90}}>{v.watchPeopleTotal || '-'}</Text>
                    <Text className="coltit" style={{ width: 90 }}>{v.watchTotal || '-'}</Text>
                  </View>
              )
            })
          }
        </View>
      </View>

      <View className="totalWrap">
        <ColumnTitle 
         style={{ fontWeight: '300' }} 
         moreStyle={{color:"#939393"}} 
         title1="工作单位统计" 
         source={iconCompany}
         isVisible={false} click={() => {
          navigateTo("/packageA/pages/video-total-page/index", {
            title: '工作单位统计',
            type: "company",
            startDate,
            endDate
          })
        }} />
        <View className="headWrap" style={{ flex: 1,backgroundColor:"#fffbf0" }}>
          <Text className="tit" style={{ width: '150px', textAlign: "left" }}>单位名称</Text>
          <Text className="tit" style={{ width: '80px' }}>总人数</Text>
          <Text className="tit" style={{ width: '100px' }}>观看(次)</Text>
        </View>

        <View className={"list-item"}>
          {
            data3.map(v => {
              return (
                <View className="iteWrap" style={{ flex: 1 }}>
                    <Text className="coltit" style={{ width: '150px', textAlign: "left" }}>{v.name}</Text>
                    <Text className="coltit" style={{ width: '80px' }}>{v.watchPeopleTotal || '-'}</Text>
                    <Text className="coltit" style={{ width: '100px' }}>{v.watchTotal || '-'}</Text>
                  </View>
              )
            })
          }
        </View>
      </View>


      <DatePicker
        title={"选择开始日期"}
        visible={timeStartVisible}
        pickerProps={{
          popupProps: { zIndex: 1220 },
        }}
        value={new Date(startDate)}
        showChinese
        onCancel={() => setTimeStartVisible(false)}
        onConfirm={(options, values) => {
          setStartDate(options.map((option) => option.value).join('-'))
          setTimeStartVisible(false)
          setTimeEndVisible(true)
        }}
      />

      <DatePicker
        title={"选择结束日期"}
        visible={timeEndVisible}
        pickerProps={{
          popupProps: { zIndex: 1220 },
        }}
        value={new Date(endDate)}
        showChinese
        onCancel={() => setTimeEndVisible(false)}
        onConfirm={(options, values) => {
          setEndDate(options.map((option) => option.value).join('-'))
          setTimeEndVisible(false)
        }}
      />
    </View>
  );
}
